<template>
    <div class="body">
        <div class="data">
            <div class="homedata">
                <div class="left" style="background-color: rgb(84,173,235);">
                <div>今日访客</div>
                <p>{{ lists.currentday.total }}</p>
            </div>
            <div class="right">
                <p class="process">待审核：{{ lists.currentday.wait }}人</p>
                <div >
                    <span style="float: left;margin-right: 3%;"> 未通过：{{ lists.currentday.pass }}人</span>
                    <span> 已取消：{{ lists.currentday.cancel }}人</span>
                </div>
            </div>
            </div>
            <div class="homedata">
                <div class="left" style="background-color: rgb(250, 88, 34);">
                <div>昨日访客</div>
                <p>{{ lists.yesterday.total }}</p>
                </div>
                <div class="right">
                <p class="process">待审核：{{ lists.yesterday.wait }}人</p>
                <div style="display: flex;">
                    <p> 未通过：{{ lists.yesterday.pass }}人</p>&nbsp;&nbsp
                    <p> 已取消：{{ lists.yesterday.cancel }}人</p>
                </div>
                </div>
            </div>
            <div class="homedata">
                <div class="left" style="background-color: rgb(0, 151, 137);">
                <div>最近七天</div>
                <p>{{ lists.week.total }}</p>
                </div>
                <div class="right">
                <p class="process">待审核：{{ lists.week.wait }}人</p>
                <div style="display: flex;">
                    <p> 未通过：{{ lists.week.pass }}人</p>&nbsp;&nbsp
                    <p> 已取消：{{ lists.week.cancel }}人</p>
                </div>
                </div>
            </div>
            </div>
            <div class="data">
                <div class="homedata">
                    <div class="left" style="background-color: rgb(247, 184, 36);">
                    <div>近三十天</div>
                    <p>{{ lists.mouth.total }}</p>
                    </div>
                    <div class="right">
                    <p class="process">待审核：{{ lists.mouth.wait }}人</p>
                    <div style="display: flex;">
                        <p> 未通过：{{ lists.mouth.pass }}人</p>&nbsp;&nbsp
                        <p> 已取消：{{ lists.mouth.cancel }}人</p>
                    </div>
                    </div>
                </div>
                <div class="homedata">
                    <div class="left" style="background-color: rgb(48, 65, 86);">
                    <div>最近一年</div>
                    <p>{{ lists.year.total }}</p>
                    </div>
                    <div class="right">
                    <p class="process">待审核：{{ lists.year.wait }}人</p>
                    <div style="display: flex;">
                        <p> 未通过：{{ lists.year.pass }}人</p>&nbsp;&nbsp
                        <p> 已取消：{{ lists.year.cancel }}人</p>
                    </div>
                    </div>
                </div>
            </div>
            <div ref="echartRef" class="echarts"></div>
            <div class="from">
                <div class="week">本周详情</div>
                <div class="fromweek">
                    <div>
                        <p>本周人员统计表</p>
                        <table border="1" style="border:1px solid #ccc" class="table">
                            <tr>
                                <td>日期</td>
                                <td>人数</td>
                            </tr>
                            <tr>
                                <td colspan="2">暂无数据</td>
                            </tr>
                        </table>
                    </div>
                    <div>
                        <p>本周人员申请类型表:</p>
                        <table border="1" style="border:1px solid #ccc; width: 430px;" class="table">
                            <tr>
                                <td>日期</td>
                                <td>类型</td>
                                <td>人数</td>
                            </tr>
                            <tr>
                                <td colspan="3">暂无数据</td>
                            </tr>

                        </table>
                    </div>
                </div>
            </div>
        </div>
</template>

<script setup lang="ts">
    import http from '../api/home'
    import { ref, reactive, toRefs, onMounted,onBeforeUpdate } from 'vue'
    import * as echarts from 'echarts'
    const echartRef = ref()
    let lists = ref(
  {
    currentday: {//今日
      total: '',//总数
      wait: '',//待审核
      pass: '',//通过
      cancel: ''//取消
    },
    yesterday: {//昨天
      total: '',
      wait: '',
      pass: '',
      cancel: ''
    },
    week: {//近七天
      total: '',
      wait: '',
      pass: '',
      cancel: ''
    },
    mouth: {//近30天
      total: '',
      wait: '',
      pass: '',
      cancel: ''
    },
    year: {//近一年
      total: '',
      wait: '',
      pass: '',
      cancel: ''
    },
    weekday: [//近一周每天的总数
      {
        time: "2022-04-08",
        num: 294
      },
      {
        time: "2022-04-09",
        num: 1
      }
    ],
    weektype: [//近一周每天申请的人员类型 1 外来 2 老师 3 学生
      {
        time: "2022-04-08",
        type: 1,
        num: 294
      },
      {
        time: "2022-04-09",
        type: 1,
        num: 1
      }
    ]
  }
)
interface Week{
  list:any,
  student:any,
  teacher:any,
  foreign:any
}
let week=reactive<Week>({
  list:[],
  student:[],
  teacher:[],
  foreign:[]
})

    let obj = ({
    departmentid: ''
  })
    const getlist= async () =>{
        let res=await http.count(obj.departmentid)
        console.log(res)
        lists.value=res.data
        const list=[]
        for(let i=0;i<res.data.weekday.length;i++){
          list.push(res.data.weekday[i].num)
          week.list=list
        }
        for(let i=0;i<res.data.weektype.length;i++){
          if(res.data.weektype[i].type==="1"){
            week.student.push(res.data.weektype[i].num)
          }else if(res.data.weektype[i].type==="2"){
            week.teacher.push(res.data.weektype[i].num)
          }else if(res.data.weektype[i].type==="3"){
            week.foreign.push(res.data.weektype[i].num)
          }
        }
        console.log(week)
    }
    onMounted(() => {
        getlist()
    });
    onBeforeUpdate(() => {
      let myChart = echarts.init(echartRef.value);
        myChart.setOption({
        title: { text: "访客记录变化图" },
        tooltip: {
            trigger:"axis"
        },
        legend: {
          data: ["近七天总数", "外来人员", "近七天来访老师", "近七天来访学生"],
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
            },
            toolbox: {
            feature: {
                saveAsImage: {}
            }
            },
            xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
            type: 'value'
            },
            series: [
            {
                name: '近七天总数',
                type: 'line',
                stack: 'Total',
                data: week.list
            },
            {
                name: '外来人员',
                type: 'line',
                stack: 'Total',
                data: week.foreign
            },
            {
                name: '近七天来访老师',
                type: 'line',
                stack: 'Total',
                data: week.teacher
            },
            {
                name: '近七天来访学生',
                type: 'line',
                stack: 'Total',
                data: week.student
            }
        ]
      })
    })
</script>

<style scoped>
.body {
  width: 100%;
  /* height: 100%; */
  background-color: #f1f1f1;
}

.body .data {
  width: 100%;
  height: 150px;
  display: flex;
  flex-wrap: wrap;
}

.body .data .homedata {
  width: 30%;
  height: 110px;
  border-radius: 10px;
  margin-top: 20px;
  margin-left: 3%;
  display: flex;
  background-color: #fff;
}

.body .data .homedata .left {
  width: 40%;
  height: 100%;
  border-radius: 10px;
  margin-right: 20px;
  color: #fff;
}

.body .data .homedata .left div {
  margin-left: 5%;
}
.body .data .homedata .right {
  width: 60%;
  height: 100%;
}
.body .data .homedata .right .process {
  font-size: 18px;
}

.body .data .homedata .right div {
  margin-top: 10px;
  font-size: 10px;
}

.body .data .homedata .left p {
  text-align: center;
  margin: 0;
  font-size: 60px;
}
.echarts {
  width: 98%;
  height: 450px;
  margin: 0 auto;
  border-radius: 5px;
  background-color: #fff;
}
.body .from {
  width: 98%;
  height: 200px;
  margin: 0 auto;
  border-radius: 5px;
  margin-top: 32px;
  background-color: #fff;
}
.body .from .week {
  width: 99%;
  height: 50px;
  padding-left: 18px;
  border-bottom: 1px solid #ccc;
  line-height: 50px;
}

.body .from .fromweek {
  width: 100%;
  height: 150px;
  display: flex;
  flex: 1;
}

.body .from .fromweek div {
  width: 50%;
  height: 100%;
  font-size: 20px;
  display: flex;
  /* background-color: red; */
}

.body .from .fromweek div p {
  margin-left: 100px;
  margin-top: 24px;
  font-size: 18px;
  font-weight:bold;
}

.body .from .fromweek .table {
  width: 300px;
  height: 100px;
  margin: 24px 10px;
  text-align: center;
  border-collapse: collapse
}
</style>